<template>
  <div class="app-container"> 
    <el-form :inline="true" :model="listQuery" class="demo-form-inline">
       <i class="el-icon-search btn-search" @click="handleShowSearch()"></i>
      <div class="btn-box">
          <el-button  type="primary"  @click="handleaddteamNames()">添加客户成功</el-button>
      </div>
      <div  v-show="showbtns==true"  class="search-lf">
         <el-form-item label="客户成功名称">
        <el-input v-model="listQuery.teamName" placeholder="客户成功名称"></el-input>
      </el-form-item>

      <el-form-item label="客户成功负责人">
        <el-input v-model="listQuery.charge"  placeholder="客户成功负责人"></el-input>
      </el-form-item>

     

      <el-form-item>
        <el-button  type="primary" plain  @click="getList()">查询</el-button>
      
      </el-form-item>
      </div>
     
    </el-form>
    <el-table
       v-loading="listLoading"  border
       height='650px'
      :data="list"
        fit
       highlight-current-row
      style="width: 100%"
    >
      <el-table-column align="center" width='60px' label="序号">
        <template slot-scope="scope">
          <span>{{scope.$index+1 }}</span>
          </template>
      </el-table-column>
     

      <el-table-column align="center" label="客户成功">
        <template slot-scope="{row}">
              <span>{{ row.teamName }}</span>
              <!-- <router-link :to="'/customer_detail?id='+row.id" class="link-type">
             
          </router-link> -->
        </template>
      </el-table-column>

      <el-table-column align="center" label="客户成功别名">
        <template slot-scope="{row}">
          <span>{{ row.aliasName }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column align="center" label="省份/省区名字">
        <template slot-scope="{row}">
          <span>{{ row.provinceName }}</span>
        </template>
      </el-table-column> -->
      <el-table-column align="center" label="客户成功负责人">
        <template slot-scope="{row}">
          <span>{{ row.charge }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" width="150">
        <template slot-scope="{row}">
          <el-button type="primary" @click="handleEdit(row)" size="mini" :disabled='editDisabled==true'   icon="el-icon-edit">编辑</el-button>

          <el-button
            @click="handleDel(row.id)"
            class="mg-l"
            type="danger"
            size="mini"
            icon="el-icon-delete"
          >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog  @close='handleClose'  :visible.sync="dialogVisible" :title="dialogType==='edit'?'编辑客户成功':'添加客户成功'">
      <el-form label-width="180px" label-position="right">
        <el-form-item label="客户成功名称">
          <el-input v-model="teamNameList.teamName" placeholder="请输入客户成功名称" />
        </el-form-item>
        <el-form-item label="客户成功别名">
          <el-input v-model="teamNameList.aliasName" placeholder="请输入客户成功别名" />
        </el-form-item>
        <!-- <el-form-item label="省份" v-show="dialogType==='edit'">
          <el-select filterable
            v-model="teamNameList.provinceName"
            @change="handleChangePro3($event)"
            placeholder="请选择"
          >
            <el-option
              v-for="item in provinceList"
              :key="item.provinceId"
              :label="item.province"
              :value="item.province"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <!-- <el-form-item label="客户成功列表" v-show="dialogType==='edit'">
          <el-select filterable
            v-model="teamNameList.parentId"
            @change="handleChangePro4($event)"
            placeholder="请选择"
          >
            <el-option
              v-for="item in teamNamesAll"
              :key="item.id"
              :label="item.teamName"
              :value="item.teamName"
            ></el-option>
          </el-select>
        </el-form-item> -->
        <el-form-item label="客户成功负责人">
          <el-input v-model="teamNameList.charge" placeholder="请输入客户成功负责人" />
        </el-form-item>

        <el-form-item label="备注">
          <el-input v-model="teamNameList.description" placeholder="请输入备注" />
        </el-form-item>
      </el-form>
      <div style="text-align:right;">
         <el-button type="primary" @click="confirmRole">确定</el-button>
       <el-button type="danger" class="cancel_border" plain  @click="dialogVisible=false;editDisabled=false">取消</el-button>
      </div>
    </el-dialog>

    <pagination
      v-show="total>=20"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  getteamNames,
  addteamNames,
  teamNamesProvince,
  updateteamNames,
  getteamNamesAll,
  delteamNames,
} from "@/api/region";
import { getProvinces } from "@/api/supplier";
import { Message } from "element-ui";
import Pagination from "@/components/Pagination"; // Secondary package based on el-pagination
const defaultRole = {
  key: "",
  name: "",

  routes: [],
};
export default {
  name: "getteamNames",
  components: { Pagination },
  filters: {
    statusFilter(status) {
      const statusMap = {
        1: "男",
        0: "女",
      };
      return statusMap[status];
    },
  },
  data() {
    return {
      showbtns: false,
      list: [], editDisabled:false,

      downloadLoading:false,
      total: 0,
      provinceList:[],
      teamNamesAll: [], //所有客户成功
      listLoading: true,
      listQuery: {
        access_token: sessionStorage.getItem("token"),
        page: 1,

        pageSize: 20,
      },

      teamNameList:[],

      dialogVisible: false,
      dialogType: "new",

      ids: "",
    };
  },
  created() {
    this.getList();
    this.getData();
  },

 methods: {
      
      handleClose(){
      this.editDisabled = false;
    },
    handleShowSearch() {
      this.showbtns = !this.showbtns;
    },
    handleChangePro3(id) {
      console.log(id)
      let obj = {};
      obj = this.provinceList.find((item) => {
        return item.province === id;
      });
    
      this.teamNameList.provinceId = obj.provinceId;
    
    },
  
    getData(){
          getProvinces().then((res) => {
        this.provinceList = res.data.data;
      });
      getteamNamesAll().then((res) => {
        this.teamNamesAll = res.data.data;
        console.log(this.teamNamesAll)
      });
    },
       getList() {
       this.editDisabled = false;
  
      this.listLoading = true;
      getteamNames(this.listQuery)
        .then((response) => {
          this.list = response.data.data.rows;
          this.total = response.data.data.total;
          this.listLoading = false;
        })
        .catch(() => {
          this.listLoading = false;
        });
    },
    handleDel(id) {
      this.$confirm("确定删除该客户成功么?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "error",
      })
        .then(() => {
          delteamNames(id).then((res) => {
            if (res.data.code == "200") {
              this.$message.success(res.data.message);
              this.getList();
            } else {
              this.$message.error(res.data.message);
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },

    handleaddteamNames() {
      //this.role = Object.assign({}, defaultRole);

      this.dialogType = "new";
      this.dialogVisible = true;
      this.teamNameList = {};
    },
      handleEdit(row) {
       this.editDisabled=true;
      this.dialogType = "edit"
      this.dialogVisible = true;

      this.teamNameList = row;
      teamNamesProvince(row.id).then((res) => {
        console.log(res);
      });
      // this.teamNameList.parentId=row.id
    },
    confirmRole(id) {
     const isEdit = this.dialogType ==="edit";
      if (isEdit) {
        updateteamNames(this.teamNameList).then((res) => {
          if (res.data.code == "200") {
            this.$message.success(res.data.message);
            this.dialogVisible = false;
            this.getList();
             this.editDisabled=false;
          } else {
            this.$message.error(res.data.message);
          }
        });
        return false;
      }
      let _this = this;
      addteamNames(this.teamNameList).then((res) => {
        console.log(res);
        if ((res.code = "200")) {
          this.$message.success(res.data.message);
          //     Message({
          //   message: res.data.message ,
          //   type: 'success',
          //   duration: 5 * 1000
          // })
          _this.dialogVisible = false;

          _this.getList();
        }
      });
    },
  },
};
</script>

<style scoped>
.edit-input {
  padding-right: 100px;
}
.cancel-btn {
  position: absolute;
  right: 15px;
  top: 10px;
}
</style>
